<script>
import { isNull } from "@/utils/service";
import {
  commitFeatureParamTemplate,
  getFeatureParamTemplate,
  removeFeatureParamTemplate
} from "@/views/manage/keyWord/api";

export default {
  name: "featureTemplate",
  props: {
    /** 功能类型*/
    type: {
      type: String,
      required: true
    },
    /** 任务参数*/
    taskParams: {
      type: Object,
      required: true
    },
    /** 恢复面板默认方法*/
    defTemplate: {
      type: Function,
      required: true
    },
    /** 加载模板参数方法 */
    loadTemplate: {
      type: Function,
      required: true
    },
    /** 校验参数方法 */
    checkParam: {
      type: Function,
      required: true
    },
  },
  data() {
    return {
      loading: false,
      nowName: "",
      nowId: "",
      data: []
    };
  },
  methods: {
    isNull,
    /** 将模板置于默认*/
    _defTemplate() {
      this.nowId = ""
      this.nowName = ""
      this.defTemplate()
    },
    /** 加载模板参数 */
    _loadTemplate(data){
      this.nowId = data.id;
      this.nowName = data.name;
      this.loadTemplate(JSON.parse(data.params))
    },
    /**  删除模板*/
    delTemplate(ids) {
      let _ = this;
      removeFeatureParamTemplate(this,JSON.stringify(ids),res => {
        _.getTemplate()
      })
    },
    /**  获取模板*/
    getTemplate() {
      let _ = this;
      _.loading = true
      getFeatureParamTemplate(this, _.type, res => {
        _.data = res
      },res => {_.loading = false});
    },
    /** 将任务参数提交为模板*/
    commitTemplate() {
      let _ = this;
      if (!_.checkParam()){
        return;
      }
      let p = {
        id: _.nowId,
        name: _.nowName,
        jsonParams: JSON.stringify(_.taskParams),
        type: _.type
      };
      let inputDef = "";
      if (!isNull(p.id)) {
        inputDef = p.name;
      }
      _.$prompt("请输入新模板名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\s*[\S\s]+\s*$/,
        inputErrorMessage: "请填新模板名称",
        inputValue: inputDef
      }).then(({ value }) => {
        p.name = value
        commitFeatureParamTemplate(_, p,res => {
            _.nowId = res
            _.nowName = value
            _.$message.success("提交成功")
          }
        );
      });
    },
  }
};
</script>

<template>
  <div>
    <div style="margin: 10px 5px">
      <div>
        <div style="margin: 5px 0" v-if="!isNull(nowName)">
          <span style="font-weight: bold;font-size: 14px;color: #636e72">当前名称 : </span>
          <span style="font-weight: bold;color: #636e72">{{nowName}}</span>
        </div>
        <el-popover
          placement="left"
          width="80%"
          trigger="click">
          <el-table
            :data="data"
            v-loading="loading"
          >
            <el-table-column :show-overflow-tooltip="true" width="200" property="name"
                             label="名称"></el-table-column>
            <el-table-column sortable width="200" property="createTime" label="创建时间"></el-table-column>
            <el-table-column sortable width="200" property="updateTime" label="修改时间"></el-table-column>
            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="_loadTemplate(scope.row)">加载</el-button>
                <el-button size="mini" type="danger" @click="delTemplate([scope.row.id])">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button size="mini" type="primary" slot="reference" @click="getTemplate">查看记录模板</el-button>
        </el-popover>
        <el-button style="margin-left: 10px" size="mini" type="primary" @click="commitTemplate">提交当前面板
        </el-button>
        <el-popconfirm
          style="margin-left: 10px"
          confirm-button-text="确认"
          cancel-button-text="点错了"
          icon="el-icon-info"
          icon-color="red"
          title="将清除面板,确定要恢复默认吗？"
          @confirm="_defTemplate"
        >
          <el-button slot="reference" size="mini" type="primary" >
            恢复默认
          </el-button>
        </el-popconfirm>

      </div>
    </div>
  </div>
</template>

<style scoped>

</style>